<template>
  <div class="SongSheetBox">
    <div class="detailLeft">
      <Introduce
        v-if="DetailObj"
        :playlist="DetailObj.playlist"
        :resourcesId="DetailObj.playlist.id"
      />
      <MusicList v-if="DetailObj" :playlist="DetailObj.playlist" />
      <Comment
        v-if="DetailObj"
        ref="comment"
        :resourcesId="DetailObj.playlist.id"
        :resourcesType="2"
        :commentObj="commentObj"
        @getComment="getComment"
      />
    </div>
    <div class="detailRight">
      <RightDom ref="rightDom" />
    </div>
  </div>
</template>

<script>
import Introduce from "@/views/SongSheetDetail/introduce.vue";
import MusicList from "@/components/musicTable";
import RightDom from "@/views/SongSheetDetail/rightDom.vue";
import Comment from "@/components/comment";
import { getSongSheetDetail, songSheetComment } from "@/api";
export default {
  data() {
    return {
      DetailObj: "",
      commentObj: {},
    };
  },
  created() {
    this.getDetail();
    this.getComment();
  },
  components: {
    Introduce,
    MusicList,
    RightDom,
    Comment,
  },
  methods: {
    getDetail() {
      getSongSheetDetail({ id: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          this.DetailObj = res;
        }
      });
    },
    getComment(pageNum) {
      songSheetComment({
        id: this.$route.query.id,
        limit: 20,
        offset: ((pageNum || 1) - 1) * 20,
        timestamp: new Date().valueOf(),
      }).then((res) => {
        if (res.code == 200) {
          this.commentObj = res;
        }
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.$refs.comment.contnetPage = 1;
    this.getDetail();
    this.getComment();
    this.$refs.rightDom.getLiveUser();
    this.$refs.rightDom.getRelevantSongSheet();
  },
};
</script>

<style lang="scss" scoped>
.SongSheetBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .detailLeft {
    flex: 1;
    border-right: 1px solid #d3d3d3;
    padding: 47px 30px 40px 39px;
    box-sizing: content-box;
    overflow: hidden;
  }
  .detailRight {
    width: 270px;
  }
}
</style>